<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js" charset="utf-8"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<link  rel="stylesheet" href="base.css" media="all"/>
		<link rel="stylesheet" href="css/iconfont.css" media="all"/>
		<link rel="stylesheet"  href="css/iconfont2.css" media="all"/>
		<style>
			html{width: 100%;}
			body{width: 100%;}
			.main{width: 100%;position: relative;}
			.topNavigation{
				height: 50px;
				width: 100%;
				background-color: #000000;
				color: white;
				display: flex;
				text-align: center;
				padding-left: 470px;
			}
			.topNavigation div{
				width: 110px;
				height: 50px;
				line-height:50px ;	
			}
			.Mapping{
				height: 400px;
				width: 250px;
			
				position: absolute;
				left: 160px;
				top: -10px;
				z-index: 999;
			}
			.mappingInfo{
				width:250px;
				height: 70%;
				
				background-color:  #8D8D8D;
				rgba(0.8,1,0.8,1) 
				color: #E7E1CD;
				padding-top: 25px;
				-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(0,0,0,0.6));
			}
			.dynamic{
				margin-top: 50px;
				width: 100%;
				height: 510px;

				display: flex;
				justify-content: space-around;
			}
			.dynamic ul{
				height: 190px;
			}
			.dynamic li{
				width: 80%;
				height: 40px;
				line-height: 40px;
				margin: 5px;
				white-space:nowrap;
				word-break:break-all; 
				text-overflow:ellipsis; 
				-o-text-overflow:ellipsis;
				 overflow: hidden;
				 color: #000000;
			}
			.icon{
				width: 100%;
				height: 20px;
				text-align: center;
			}
			.icon span{
				margin: 10px;
			}
			
			.service{
				margin-top: 55px;
				width: 100%;
				height: 300px;
				
				display: flex;
				align-items: center;
				
				justify-content: space-evenly;
				
			}
			.service-item{
				width: 200px;
				height: 200px;
				
				position: relative;
				
			}
			.server-title{
				position: relative;
				top: 25px;
				right: 10px;
				color: #000000;
				font-size: 13px;
			}
				.box1{
				            width: 60px;
				            height: 98px;
				            border-top: 5px solid   #007DDB;
				            border-bottom: 5px solid #007DDB;
				            transform: rotate(60deg);
				            margin-left: 65px;
				        }
				
				        .box3{
				            width: 61px;
				            height: 96px;
				            border-top: 5px solid  #007DDB;
				            border-bottom: 5px solid  #007DDB;
				            transform: rotate(-60deg);
				            margin-left: 65px;
				            margin-top: -105px;
				            float: left;
				        }
				        .box2{
				            width: 60px;
				            height: 97px;
				            border-top: 5px solid #007DDB;
				            border-bottom: 5px solid #007DDB;
				            margin-top: -109px;
				            margin-left: 65px;
				        }
				.server-icon{
					position: relative;
					top: -105px;
					left: 64px;
					
				}
				.server-icon i{
					font-size: 60px;
					color:#007DDB;
					display: inline-block;
				}
				.about{
					width: 100%;
					height: 400px;
					
				}
				.friend{
					display: flex;
					flex-wrap: wrap;
					padding: 50px;
					background-color: #E6E6E6;
					
					height: 100%;
				}
				.friend div{
					width: 200px;height: 100px;margin: 10px;
				}
				.friend img{
					width: 100%;height: 100%;
				}
				.Ours-item{
					color: white;
					font-size: 22px;
					margin-right: 30px;
				}
				.Ours-item li{
					font-size: 15px;
					margin-top: 15px;
					cursor: pointer;
				}
				.Ours-img{
					width: 200px;
					height: 200px;
					position: relative;
					left: 500px;
				}
				.Ours-bottom{
					position: relative;
					top: 299px;
					right: 210px;
					font-size: 10px;
				}
				.slideMenu{
					width: 750px;
					height: 300px;
					background-color: #000000;
					position: absolute;
					left: 470px;
					
					z-index: 999;
					padding: 20px 60px;
					display: none;
					
				}
				.slideMenu ul{
					display: flex;
					flex-wrap: wrap;
				}
				.slideMenu li{
					margin-right: 20px;
					color: white
				}
		</style>
	</head>
	<body>
		<div class="main">
			<!-- 导航栏 -->
			<div class="topNavigation">
				<div >
					首页
					
				</div>
				<div>
					业务范围
				</div>
				<div>
					企业动态
				</div>
				<div>
					服务成绩
				</div>
				<div>
					人才招聘
				</div>
				<div>
					联系我们
				</div>
				<div>
					关于我们
					
				</div>
			
			</div>
			<!-- 导航栏下拉菜单 -->
			<div class="slideMenu">
				<ul>
				
				</ul>
			</div>
			
			
			<!-- 贴图 -->
			<div class="Mapping">
				<div class="mappingImg" style="width: 100%;height: 26%;background-color: white;">
					<img src="./img/世纪恒祥.png" style="width: 100%;height: 100%;"/>
				</div>
				<div class="mappingInfo" >
					<div class="mappingInfo-item" style="height: 60px;">
						<div style="display: flex;"><div style="margin-top: 5px;margin-right: 5px;"><i class="layui-icon layui-icon-email" style="font-size: 30px;vertical-align: middle;"></i><span style="font-size: 10px;margin-left: 10px;">邮&nbsp箱</span></div></div>
						<div>123132</div>
					</div>
					<div class="mappingInfo-item" style="height: 60px; ">
						<div style="display: flex;"><div style="margin-top: 5px;margin-right: 5px;"><i class="iconfont icon-dizhi" style="font-size: 30px;vertical-align: middle;"></i><span style="font-size: 10px;margin-left: 10px;">地&nbsp址</span></div></div>
						<div>123132</div>
					</div>
					<div class="mappingInfo-item" style="height: 60px;">
						<div style="display: flex;"><div style="margin-top: 5px;margin-right: 5px;"><i class="iconfont icon-dianhua" style="font-size: 30px;vertical-align: middle;"></i><span style="font-size: 10px;margin-left: 10px;">电&nbsp话</span></div></div>
						<div>123132</div>
					</div>
					
				</div>
			</div>
			
			<!-- 轮播图 -->
			<div class="Carouselmap" style="z-index: -9999;">
				<div class="layui-carousel" id="test1" >
				  <div carousel-item>
				    <div><img src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/1_%E5%89%AF%E6%9C%AC.jpg" style="width: 100%;height: 100%;"></div>
				    <div><img src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/2_%E5%89%AF%E6%9C%AC.jpg" style="width: 100%;height: 100%;"></div>
				    <div><img src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/1_%E5%89%AF%E6%9C%AC.jpg" style="width: 100%;height: 100%;"></div>
				    <div><img src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/2_%E5%89%AF%E6%9C%AC.jpg" style="width: 100%;height: 100%;"></div>
				    <div><img src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/3_%E5%89%AF%E6%9C%AC.jpg" style="width: 100%;height: 100%;"></div>
				  </div>
				</div>
			</div>
			
			<!-- 公司动态 -->
			<div class="dynamic">
				<!-- 通知公告 -->
				<div class="notices" style="width:400px ;height: 510px;">
					<div class="title" style="line-height: 60px;text-align: center;width: 100%;height: 60px;">
						<span style="font-size: 40px;color: #000000;">通知公告</span><span style="color: black">/公司公告</span>
					</div>
					<div style="width:100%;height: 150px;">
						<img style="width:100%;height: 150px;" src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/b1.jpg"/>
					</div>
					<div style="width:100%;height: 270px;padding-top: 30px;line-height:30px;">
						<ul class="notice-ul">
						
						</ul>
						<div class="icon" id="noticeIcon">
							
						</div>
					</div>
				</div>
				
				<!-- 新闻 -->
				<div class="news" style="width:400px ;height: 510px;">
					<div class="title" style="line-height: 60px;text-align: center;width: 100%;height: 60px;">
						<span style="font-size: 40px;color: #000000;">新闻</span><span style="color: black">/最新资讯</span>
					</div>
					<div style="width:100%;height: 150px;">
						<img style="width:100%;height: 150px;" src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/b5.png"/>
					</div>
					<div style="width:100%;line-height:30px;height: 270px;padding-top: 30px;">
						<ul class="news-ul">
							
						</ul>
						<div class="icon" id="newIcon">
							
						</div>
					</div>
				</div>
				<!-- 员工动态 -->
				<div class="employees" style="width:400px ;height: 510px;">
					<div class="title" style="line-height: 60px;text-align: center;width: 100%;height: 60px;">
						<span style="font-size: 40px;color: #000000;">员工动态</span><span style="color: black">/动态消息</span>
					</div>
					<div style="width:100%;height: 150px;">
						<img style="width:100%;height: 150px;" src="http://www.oac.cn/HuaziOA_Admin_sjhx/Publish/AD/01/upload/b6.jpg"/>
					</div>
					<div style="width:100%;height: 270px;padding-top: 30px;line-height:30px;">
						<ul class="employees-ul">
							
						</ul>
						<div class="icon" id="employeeIcon">
							
						</div>
					</div>
				</div>
			</div>
				
				<!-- 我们的服务 -->
			<fieldset class="layui-elem-field" style="margin: 30px;">
				  <legend style="color: #000000;font-weight: 400;font-size: 30px;">我们的服务</legend>
				  <div class="layui-field-box">
				    
				    <div class="service">
				    	<!-- 自动化 -->
				    	<div id="automation" class="service-item">
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">自动化</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-zidonghuaxueyuan"></i>
				    		</div>
				    	</div>
				    	<!-- 信息化 -->
				    	<div id="information"  class="service-item">
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">信息化</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-internet-1"></i>
				    		</div>
				    	</div>
				    	<!-- 消防 -->
				    	<div id="firePro" class="service-item">
				    		
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">消防工程</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-xiaofangzhidui"></i>
				    		</div>
				    	</div>
				    	<!-- 环保 -->
				    	<div id="enPro"  class="service-item">
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">环保</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-huanbao"></i>
				    		</div>
				    	</div>
				    	<!-- 监控安防 -->
				    	<div id="security"  class="service-item">
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">监控安防</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-jiankong"></i>
				    		</div>
				    	</div>
				    	<!-- 软件研发 -->
				    	<div id="software"  class="service-item">
				    		<div>
				    			<div class="box1"></div>
				    			<div class="box2"></div>
				    			<div class="box3"></div>
				    		</div>
				    		<div class="server-title">软件研发</div>
				    		<div class="server-icon">
				    			<i class="iconfont icon-diannao"></i>
				    		</div>
				    	</div>
				    		
				    </div>
				    
				  </div>
				</fieldset>
			
			<!-- 友情链接/关于我们 -->
			<div class="about">
				<div class="friend">
				 
				
				
				</div>
<!-- 					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					  <ul class="layui-tab-title">
					    <li class="layui-this">友情链接</li>
					    <li>关于我们</li>
					  </ul>
					    <div class="layui-tab-content" style="height: 350px;">
							友情链接 
					      <div class="layui-tab-item layui-show "  style="height: 100%;">
							 <div class="friend"> 
							 
							
							
							</div>

						  </div>
						  关于我们 
					      <div class="layui-tab-item ours" style="background-color: #000000;height: 100%;">
							<div style="display: flex;padding:15px 200px;" class="aboutOurs">
								业文化建设
									  <div class="Ours-item">
										  <div><strong>企业文化建设</strong></div>
										  <ul>
											  <li>党群建设</li>
											  <li>团委建设</li>
											  <li>工会之家</li>
											  <li>内部论坛</li>
										  </ul>
									  </div>
									  捷办公 
									  <div class="Ours-item">
									  	<div><strong>快捷办公</strong></div>
									  		<ul>
											<li>OA登录</li>
									  		<li>邮箱登录</li>
									  		<li>考试系统登录</li>
											<li>维保软件登录</li>
									  		</ul>
									  </div>
									  <div class="Ours-item">
									  	<div><strong>关于我们</strong></div>
									  		<ul>
									  		<li>党群建设</li>
									  		<li>公司介绍</li>
									  		<li>企业文化</li>
											<li>公司资质</li>
											<li>公司荣誉</li>
											<li>知识产权</li>
											<li>公司产品</li>
									  		</ul>
									  </div>
									  <div class="Ours-img">
									  	<img  src="img/世纪恒祥二维码.png"/>
									  </div>
									  <div class="Ours-bottom">
										  <div>©2017 宁波世纪恒祥自控技术有限公司 网络备案号: <span style="color: yellow;">浙ICP备17054670号</span> </div>
										  <div>信息产业部备案管理系统网址:  <span style="color: yellow;">https://beian.miit.gov.cn/</span></div>
									  </div>
								  </div>
								</div>
							</div>
					</div>      -->
					      
					<div  style="background-color: #000000;height: 100%;">
							<div style="display: flex;padding:15px 200px;" class="aboutOurs">
								<!-- 企业文化建设 -->
									  <div class="Ours-item">
										  <div><strong>企业文化建设</strong></div>
										  <ul>
											  <li>党群建设</li>
											  <li>团委建设</li>
											  <li>工会之家</li>
											  <li>内部论坛</li>
										  </ul>
									  </div>
									  <!-- 快捷办公 -->
									  <div class="Ours-item">
									  	<div><strong>快捷办公</strong></div>
									  		<ul>
											<li>OA登录</li>
									  		<li>邮箱登录</li>
									  		<li>考试系统登录</li>
											<li>维保软件登录</li>
									  		</ul>
									  </div>
									  <div class="Ours-item">
									  	<div><strong>关于我们</strong></div>
									  		<ul>
									  		<li>党群建设</li>
									  		<li>公司介绍</li>
									  		<li>企业文化</li>
											<li>公司资质</li>
											<li>公司荣誉</li>
											<li>知识产权</li>
											<li>公司产品</li>
									  		</ul>
									  </div>
									  <div class="Ours-img">
									  	<img  src="img/世纪恒祥二维码.png"/>
									  </div>
									  <div class="Ours-bottom">
										  <div>©2017 宁波世纪恒祥自控技术有限公司 网络备案号: <span style="color: yellow;">浙ICP备17054670号</span> </div>
										  <div>信息产业部备案管理系统网址:  <span style="color: yellow;">https://beian.miit.gov.cn/</span></div>
									  </div>
								  </div>
								</div>
							</div>
					</div> 
					
			</div>
								
				
		</div>
		
		
		
		
		
		<script>
			layui.use([ 'carousel', 'layer','element' ], function() {
			 var layer = layui.layer; 
			   var carousel = layui.carousel;
			   var element=layui.element;
			   //建造实例
			   carousel.render({
			     elem: '#test1'
			     ,width: '100%' //设置容器宽度
			     ,arrow: 'always' //始终显示箭头
			     //,anim: 'updown' //切换动画方式
				 ,height:'380px'
				 ,autoplay:true
				 ,interval:'2500'
			   });
			});
		</script>
		
		<script>	
		
				$(function(){
					//顶部导航栏下拉菜单
					//首页list
					var list0=[];
					//业务范围list
					var list1=[{name:"自动化服务",url:""},{name:"信息化服务",url:""},{name:"消防工程",url:""},{name:"环保",url:""},{name:"监控安防",url:""},{name:"软件研发",url:""}];
					//企业动态list
					var list2=[{name:"通知公告",url:""},{name:"新闻快讯",url:""},{name:"员工天地",url:""}];
					//服务业绩list
					var list3=[];
					//人才招聘list
					var list4=[];
					//联系我们list
					var list5=[];
					//关于我们list
					var list6=[{name:"公司介绍",url:""},{name:"企业文化",url:""},{name:"公司资质",url:""},{name:"公司荣誉",url:""},{name:"知识产权",url:""},{name:"公司产品",url:""}];
					function loopList(list){
						if(list.length!=0){
							for(let i=0;i<list.length;i++){
								var li=$("<li>"+list[i].name+"</li>")
								console.log(li)
								$(".slideMenu ul").append(li);								
							}
							console.log($(".slideMenu li"))
							$(".slideMenu").slideDown(1);
						}
						else{
							$(".slideMenu").slideUp(1);
						}
					}
				// 顶部导航栏选择
				$(".topNavigation div").each(function(i,el){
					$(".topNavigation div").eq(i).hover(function(){
					$(".slideMenu ul").empty();
							$(this).css({
								backgroundColor:"#00FFFF",
								opacity:"0.5",	
						})
						console.log("ok")
						switch(i){
							case 0:loopList(list0);break;
							case 1:loopList(list1);break;
							case 2:loopList(list2);break;
							case 3:loopList(list3);break;
							case 4:loopList(list4);break;
							case 5:loopList(list5);break;
							case 6:loopList(list6);break;
							default:break;
						}
						
					},function(){
						$(this).css({
								backgroundColor:"",
								opacity:"1",
						})
						$(".slideMenu").hover(function(){
						
						},function(){
				
								
							$(".slideMenu").slideUp(1)
						})
						
					})
					
				})
				
				//企业动态轮播卡片
				function card(titleIconId,IconSpanId,titleUlClass,list){
					var noticelist=list;
					var i=0;
					$(titleUlClass).empty()
					for(i=0;i<4;i++){
						console.log(noticelist[i]);
						if(noticelist[i]==null){
							break;
						}
						else{
							var content=$("<li>"+`<a href=${noticelist[i].url}>`+noticelist[i].title+"</a>"+"</li>")
							$(titleUlClass).append(content)
						}							
					}
					if(noticelist.length%4==0){	
					for(i=1;i<=((noticelist.length/4));i++){
							var icon=$("<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;'></span>")
							$(titleIconId).append(icon);
						}
						$(IconSpanId).each(function(index,el){
								$(IconSpanId).eq(index).hover(function(){
									$(titleUlClass).empty()
									for(i=(index*4);i<(4*(index+1));i++){
										console.log(noticelist[i]);
										if(noticelist[i]==null){
											break;
										}
										else{
											var content=$("<li>"+`<a href=${noticelist[i].url}>`+noticelist[i].title+"</a>"+"</li>")
											$(titleUlClass).append(content)
										}							
									}
								})						
					})
					}
					else{	
						if(noticelist.length<=4){
							$(IconSpanId).each(function(index,el){
								$(IconSpanId).eq(index).hover(function(){
									$(titleUlClass).empty()
									for(i=(index*4);i<(4*(index+1));i++){
										console.log(noticelist[i]);
										if(noticelist[i]==null){
											break;
										}
										else{
											var content=$("<li>"+`<a href=${noticelist[i].url}>`+noticelist[i].title+"</a>"+"</li>")
											$(titleUlClass).append(content)
										}							
									}
								})						
							})
						}
						else{
							for(i=1;i<=((noticelist.length/4)+1);i++){
									var icon=$("<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;'></span>")
									$(titleIconId).append(icon);
								}
							$(IconSpanId).each(function(index,el){
								$(IconSpanId).eq(index).hover(function(){
									$(titleUlClass).empty()
									for(i=(index*4);i<(4*(index+1));i++){
										console.log(noticelist[i]);
										if(noticelist[i]==null){
											break;
										}
										else{
											var content=$("<li>"+`<a href=${noticelist[i].url}>`+noticelist[i].title+"</a>"+"</li>")
											$(titleUlClass).append(content)
										}							
									}
								})						
							})
						}
					
				}
				$(IconSpanId).hover(function(){
					$(this).removeClass("layui-bg-gray")
					$(this).siblings(IconSpanId).addClass("layui-bg-gray")
					$(this).css("cursor","pointer")
				})
				$(IconSpanId).eq(0).removeClass("layui-bg-gray")
				}
				//通知公告
				card("#noticeIcon","#noticeIcon span",".notice-ul",[{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻2",url:"https://www.baidu.com"},{title:"新闻2",url:"https://www.baidu.com"},{title:"新闻2",url:"https://www.baidu.com"},{title:"新闻2",url:"https://www.baidu.com"},{title:"新闻3",url:"https://www.baidu.com"}]);
				//新闻
				card("#newIcon","#newIcon span",".news-ul",[{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"}]);
				//员工动态
				card("#employeeIcon","#employeeIcon span",".employees-ul",[{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"},{title:"新闻1",url:"https://www.baidu.com"}]);
			
			//友情链接图片展示
			var friendList=[{imgName:"img/中国石化.png",imgUrl:"http://www.sinopec.com/listco/"},{imgName:"img/中国海迪.jpg",imgUrl:""},{imgName:"img/中控.jpg",imgUrl:""},{imgName:"img/浙江安防网.png",imgUrl:""},{imgName:"img/施耐德电气.jpg",imgUrl:""},{imgName:"img/hollysys.png",imgUrl:""},{imgName:"img/宁波职业培训公共服务网.png",imgUrl:""},{imgName:"img/siemens.png",imgUrl:""},]
			function friendListShow(list){
				for(let i=0;i<list.length;i++){
					var div=$("<div><a href="+list[i].imgUrl+"><img src="+list[i].imgName+"></img></a></div>")
					$(".friend").append(div)
				}
			}
			friendListShow(friendList);
			$(".mappingInfo-item").hover(function(){
				$(this).css("color","white")
			},function(){
				$(this).css("color","#E7E1CD")
			})
			
		})
		</script>
	</body>
</html>
